<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue的路由开发</title>
</head>
<body>
    <div id="app">
        <!-- {{msg}} -->
        <!-- <login></login>
        <register></register> -->
        <router-view></router-view>
        <a href="#/login">点我登录</a>
        <a href="#/register">点我注册</a>
        <router-link to="/login" tag="button">我要登录</router-link>
    </div>
    <!-- 登录组件模板 -->
    <template id="login">
        <h1>登录组件</h1>


    </template>
     <!-- 注册组件 -->
     <template id="register">
        <h1>注册组件</h1>

     </template>
</body>
</html>
<!-- <script src="./js/vue.js"></script>
<script src="./js/vue-router.js"></script> -->
<script type="module">
    import {} from './js/vue.js';
    import {} from './js/vue-router.js';
    //登录组件
    let login={
        template:'#login',
        props: [],
    };

    //注册组件
    let register={
        template:'#register',
        props: [],
    };
    // 定义路由
    // 每个路由应该映射一个组件。 其中"component" 可以是
    // 通过 Vue.extend() 创建的组件构造器，
    // 或者，只是一个组件配置对象。
    // 我们晚点再讨论嵌套路由。
    const routes = [
        //用来在第一次进入时是一个指定的页面
        {path:'/',redirect: 'register'},
        { path: '/login', component: login },
        { path: '/register', component: register },
    ];
    // 3. 创建 router 实例，然后传 `routes` 配置
    // 你还可以传别的配置参数, 不过先这么简单着吧。
    const router = new VueRouter({
        routes, // (缩写) 相当于 routes: routes
    });

    new Vue({
        el:"#app",
        data:{
            msg:"hello Vue!"
        },
        //自定义方法
        methods: {
            
        },
        computed: {
            //计算属性

        },
        // (缩写) 相当于 routes: routes
        router,

        // components: {
        //     //注册组件
        //     login,register
        // },
    });

</script>
<!-- 
    <script type="module">
    import {} from './js/vue.js';
    import {} from './js/vue-router.js';
    1.需要组件 2.通过地址来找组件3.将路由交给路由对象管理 4.将路由对象交给实列管理 
-->